<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('修改基本设置')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <style>
        #showImage{
            height: 100px;
            border: 1px solid #e2e2e2;
        }
        #showIco{
            height: 50px;
            border: 1px solid #e2e2e2;
        }
        .imgSyle{
            height: 100px;
            border: 1px solid #e2e2e2;
        }
        .description{
            color: red;
        }
    </style>
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
<form class="form-horizontal m" id="form-company-edit" th:object="${company}">
    <input name="companyId" th:field="*{companyId}" type="hidden">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">机构名称</label>
        <div class="col-sm-6">
            <input name="companyName" th:field="*{companyName}" class="form-control" type="text" required>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">网站名称</label>
        <div class="col-sm-6">
            <input name="siteName" th:field="*{siteName}" class="form-control" type="text" required>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">网站域名</label>
        <div class="col-sm-6">
            <input name="siteDomain" th:field="*{siteDomain}" class="form-control" type="text" required>
            <span class="description">同一主域下输入域名前缀即可（如：www.dwvan.com，输入：www）</span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">logo</label>
        <div class="col-sm-6">
            <input id="logo" name="logo" th:field="*{logo}" class="form-control" type="text">
        </div>
        <div class="col-sm-2">
            <label for="avatar" class="btn btn-success"><i class="fa fa-image"></i> 上传LOGO</label>
            <input type="file" onchange="ImgLogo()" style="display: none" value="" name="avatar" id="avatar" accept="image/*"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">logo预览</label>
        <div class="col-sm-9">
            <img id="showImage" th:src="${(company.logo!=null?company.logo:'/static/img/logo.png')}"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">ico图标</label>
        <div class="col-sm-6">
            <input id="ico" name="ico" th:field="*{ico}" class="form-control" type="text">
        </div>
        <div class="col-sm-2">
            <label for="icoImg" class="btn btn-success"><i class="fa fa-image"></i> 上传ICO</label>
            <input type="file" onchange="icoLogo()" style="display: none" value="" name="avatar" id="icoImg" accept="image/*"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">ico图标预览</label>
        <div class="col-sm-6">
            <img id="showIco" th:src="${(company.ico!=null?company.ico:'/static/favicon.ico')}"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">二维码</label>
        <div class="col-sm-6">
            <input id="qrcode" name="qrcode" th:field="*{qrcode}" class="form-control" type="text">
        </div>
        <div class="col-sm-2">
            <label for="imgCode" class="btn btn-success"><i class="fa fa-qrcode"></i> 上传二维码</label>
            <input type="file" onchange="ImgCode()" style="display: none" value="" name="avatar" id="imgCode" accept="image/*"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right">二维码预览</label>
        <div class="col-sm-6">
            <img class="imgSyle" id="showImgCode" th:src="${(company.qrcode!=null?company.qrcode:'/static/img/qrcode.png')}"/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">描述</label>
        <div class="col-sm-9">
            <textarea style="height: 100px;" th:text="*{description}" name="description" class="form-control"></textarea>
            <span class="description">网站站点描述，不支持HTML</span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">关键词</label>
        <div class="col-sm-9">
            <textarea style="height: 100px;" th:text="*{keywords}" name="keywords" class="form-control"></textarea>
            <span class="description">网站搜索关键字，不支持HTML</span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">版权标识</label>
        <div class="col-sm-9">
            <textarea style="height: 100px;" th:text="*{copyright}" name="copyright" class="form-control"></textarea>
            <span class="description">版权声明或备案信息，支持HTML</span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">联系我们</label>
        <div class="col-sm-9">
            <textarea style="height: 100px;" th:text="*{contact}" name="contact" class="form-control"></textarea>
            <span class="description">联系信息，支持HTML</span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">联系人</label>
        <div class="col-sm-3">
            <input name="linkName" th:field="*{linkName}" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">电话</label>
        <div class="col-sm-3">
            <input name="linkMobile" th:field="*{linkMobile}" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">备注</label>
        <div class="col-sm-9">
            <textarea style="height: 100px;" th:text="*{remarks}" name="remarks" class="form-control"></textarea>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">过期时间</label>
        <div class="col-sm-3">
            <input name="expireDate" th:field="*{expireDate}" placeholder="yyyy-MM-dd"  class="form-control" type="text">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label is-required text-sm-right">上级id</label>
        <div class="col-sm-2">
            <input name="parentId" th:field="*{parentId}"  class="form-control" type="text">
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2"></label>
        <div class="col-sm-9">
            <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-danger" onclick="parent.layer.closeAll()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
</form>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<script type="text/javascript">
    var prefix = "/company";

    $("#form-company-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.ajax({
                url: "/company/save.json",
                data: $('#form-company-edit').serialize(),
                type: "post",
                dataType: "json",
                success: function (json) {
                    if (json.code === 0) {
                        return layer.alert('恭喜您，保存成功，请按确定返回！', function () {
                            parent.location.reload();
                        });
                    } else {
                        return layer.alert(json.msg);
                    }
                }
            })
        }
    }

    function ImgLogo() {
        var file = $('#avatar')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#logo").val(result.data.src);
                    $("#showImage").attr("src",result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                }else{
                    window.layer.msg('上传失败', {icon: 2});
                }

            }
        })
    }

    function icoLogo() {
        var file = $('#icoImg')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#ico").val(result.data.src);
                    $("#showIco").attr("src",result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                }else{
                    window.layer.msg('上传失败', {icon: 2});
                }

            }
        })
    }

    function ImgCode() {
        var file = $('#imgCode')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#qrcode").val(result.data.src);
                    $("#showImgCode").attr("src",result.data.src);
                    window.layer.msg('上传成功', {icon: 1});
                }else{
                    window.layer.msg('上传失败', {icon: 2});
                }

            }
        })

    }
    $("input[name='expireDate']").datetimepicker({
        format:'Y-m-d',
        formatDate:'Y-m-d',
        timepicker: false
    });
</script>
</body>
</html>